<template>
  <div>
    <a-transfer
      ref="transfer"
      :data-source="dataList"
      :disabled="disabledSubmit"
      :target-keys="targetKeys"
      :titles="['未分配用户', '已分配用户']"
      show-search
      :filter-option="filterOption"
      :render="item => `${item.title}--${item.description}`"
      :list-style="{
        width: '300px',
        height: '500px',
      }"
      @change="handleChange"
      @search="handleSearch"
    />
    <div class="Bottom">
      <vxe-button status="primary" @click="submitEvent">保存</vxe-button>
      <vxe-button @click="closeEvent">关闭</vxe-button>
    </div>
  </div>
</template>

<script>
import { editAssignedUser, getAssignedUserList, getUserList } from '@/api/system'
import axios from 'axios'

export default {
  name: 'AssignUserForm',
  components: {},
  props: {
    isModal: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dataList: [],
      targetKeys: [],
      roleId: null,
      disabledSubmit: false
    }
  },
  watch: {},
  mounted () {

  },
  methods: {
    handleUserList (data) {
      for (const datum of data) {
        const transferData = {
          key: datum.id.toString(),
          title: datum.username,
          description: datum.nickName
        }
        this.dataList.push(transferData)
      }
    },
    handleAssignedUserList (data) {
      data.forEach(item => { this.targetKeys.push(item.userId.toString()) })
    },
    initData () {
      const userListParameter = { 'getUserAll': 1 }
      const assignedUserListParameter = { 'roleId': this.roleId }
      // console.log('roleId', this.roleId)
      axios.all([getUserList(userListParameter), getAssignedUserList(assignedUserListParameter)])
        .then(axios.spread((getUserList, getAssignedUserList) => {
          console.log('getUserList', getUserList.data)
          console.log('getAssignedUserList', getAssignedUserList.data)
          const { data: userList, code: userListCode } = getUserList.data
          const { data: AssignedUserList, code: AssignedUserListCode } = getAssignedUserList.data
          if (userListCode === 200 && AssignedUserListCode === 200) {
            this.handleUserList(userList.records)
            this.handleAssignedUserList(AssignedUserList)
          }
        }))
    },
    filterOption (inputValue, option) {
      return option.description.indexOf(inputValue) > -1 || option.title.indexOf(inputValue) > -1
    },
    handleChange (targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys)
      this.targetKeys = targetKeys
    },
    handleSearch (dir, value) {
      console.log('search:', dir, value)
    },
    submitEvent (evnt) {
      console.log('mockData', this.mockData)
      console.log('targetKeys', this.targetKeys)
      const userList = []
      this.targetKeys.forEach(item => {
        userList.push({ 'userId': item, 'roleId': this.roleId })
      })
      console.log(userList)
      editAssignedUser(userList).then(res => {
        console.log(res)
        const { code } = res.data
        if (code === 200) {
          this.$XModal.message({ content: '编辑成功', status: 'success' })
          this.$emit('closeModal')
        } else if (code >= 400) {
          throw res.data
        }
      }).catch((error) => {
          // console.log(error)
          const message = error.response ? error.response.data.message : error.message
          this.$XModal.message({ content: message, status: 'error' })
        })
    },
    closeEvent (evnt) {
      this.$emit('closeModal')
    }
  }
}
</script>

<style lang='less'>
.Bottom {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
